<template>
  <h3>mixin内容</h3>
  <div @click="increment">{{ count }}</div>
  <div @click="increment">{{ double }}</div>
  <div>
    <hr />
    <h3>Home组件定义的内容</h3>
    <div @click="mySharedMethod">{{ name }}</div>
    <button type="button" @click="ageChange(-1)">-</button>
    <span ref="ref_ages">{{ age }}</span>
    <button type="button" @click="ageChange(1)">+</button>
  </div>
  <div>
    <button type="button" @click="yearChange(-1)">-</button>
    <span>{{ year }}</span>
    <button type="button" @click="yearChange(1)">+</button>
  </div>
  <div>{{ aihao.join(",") }}</div>
</template>
<script>
import { mixin } from "@/mixin/mixin";
/**
 * 文档描述
  filters 过滤器在3.x已废弃 建议用方法调用或计算属性替换它们
 * 
 */

/**
 * ref 定义响应式数据
 * reactive 定义多个响应式数据 对象类型
 * toRefs 将响应式的对象变成一个普通的对象 使用toRefs return需要进行解包解构
 * computed 计算属性 get 为函数类型 set为对象类型
 * watch 值监听 参数一为函数类型 => 指定返回要监听的值 参数二为函数类型
    => 监听后要触发的逻辑
 * getCurrentInstance 获取当前组件的实例
 */
import {
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  getCurrentInstance,
  onMounted, //组件安装完成的钩子
  onUpdated, //组件数据更新时的钩子
  onUnmounted,
} from "vue";
// 引入router
import { useRouter } from "vue-router";
export default {
  // 子组件传值的接收(porps)与父组件发送事件(context)
  setup(porps, context) {
    // 使用router
    const router = useRouter();
    const { ctx } = getCurrentInstance();
    // ctx 中包含了组件中由ref和reactive创建的响应式数据对象;
    onMounted(() => {
      console.log("组件安装完成的钩子!");
      ctx.$nextTick(() => {
        // router.push("/");
        // console.log((ctx.$refs.ref_ages));
      });
    });
    onUpdated(() => {
      console.log("组件数据更新时的钩子!");
    });
    onUnmounted(() => {
      console.log("onUnmounted!");
    });
    // reactive函数为简写部分
    // const name = ref("尘之风");
    // const age = ref(24);
    // // 计算属性只需get时使用一个箭头函数定义
    // // const year = computed(() => {
    // //   return 2021 - age.value;
    // // });
    // // 需用set时需要使用一个对象进行输出
    // const year = computed({
    //   get() {
    //     return 2021 - age.value;
    //   },
    //   set(val) {
    //     //   val为当前变更年份 => get的值
    //     age.value = 2021 - val;
    //   },
    // });
    // 注重取值细节
    // 之前需要.value取值 现在整合起来的时候 需变量(data)取值
    const data = reactive({
      name: "尘之风",
      age: 24,
      year: computed({
        get() {
          return 2021 - data.age;
        },
        set(val) {
          //val为当前变更年份 => get的值
          data.age = 2021 - val;
        },
      }),
    });
    data.aihao = ref(["学习", "看电影", "看动漫"]);
    function ageChange(val) {
      // 取值需要.value一下
      data.age += val;
    }
    function yearChange(val) {
      // 取值需要.value一下
      data.year += val;
    }
    // watch 的使用
    watch(
      () => data.age,
      (val, oldVal) => {
        // console.log(`新值:${val},旧值:${oldVal}`);
      }
    );
    const { data_mixin, double, increment } = mixin();

    return {
      ...toRefs(data),
      ageChange,
      yearChange,
      ...toRefs(data_mixin),
      double,
      increment,
    };
  },
};
</script>
<style lang="less">
</style>
